<template>
    <li>
      <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)" />
      <span v-show="!todo.isEdit">{{todo.title}}</span>
      <input
        type="text"
        ref="inputTitle"  
        v-show="todo.isEdit" 
        :value="todo.title" 
        @blur="handleBlur(todo,$event)"
      >
      <span @click="handleEdit(todo)" v-show="!todo.isEdit">编辑</span>
      <span @click="handleDelete(todo.id)">删除</span>
      <slot name="slot01"></slot>
      <slot name="slot02"></slot>
    </li>
</template>

<script>
export default {
  name: "MyItem",
  data() {
    return {};
  },
  props:['todo'],
  methods:{
    handleCheck(id){
      //通知APP组件将对应的数据的done取反
      this.$bus.$emit('checkTodo', id);
    },
    handleDelete(id){
      //通知APP组件删除对应的todo
      if(confirm('确定删除吗？')){
        this.$bus.$emit('deleteTodo',id)
      }
    },
    //编辑
    handleEdit(todo){
      this.$set(todo,'isEdit',true);
      this.$nextTick(function () {
         this.$refs.inputTitle.focus();
      });
    },
    //失去焦点更新title
    handleBlur(todo,e){
      todo.isEdit = false
      if(!e.target.value.trim()){return alert('输入不能为空')}
      this.$bus.$emit('updateTodo',todo.id,e.target.value)
    }
  }
}
</script>
